/* 通用重置样式 */
* {
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    backdrop-filter: blur(8px);
    font-family: Arial, sans-serif;
}

/* 颜色变量 */
@primary-color: #ff7f7f; /* 主色调，使用温暖的粉红色 */
@secondary-color: #ffb8b8; /* 次色调，柔和的粉色 */
@accent-color: #ff9a9a; /* 高亮色，浅粉色 */
@bg-light: rgba(255, 255, 255, 0.8); /* 浅背景 */
@bg-dark: rgba(255, 255, 255, 0.473); /* 深背景 */
@btn-hover-color: #ff9a9a; /* 按钮悬停时的颜色 */
@box-shadow-color: #ff7f7f; /* 阴影颜色为粉色系 */

/* 返回键 */
.back_box {
    height: 40px;
    width: 100px;
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .5s ease-in-out;
    color: @primary-color; /* 使用粉色 */
    font-weight: 800;
}

.back_box:hover {
    opacity: 1;
    font-size: 18px;
}

/* 容器 */
.box {
    display: flex;
    width: 800px;
    height: 500px;
    background: transparent;
    border-radius: 20px;
}

/* 左侧盒子 */
.left_box {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: @bg-dark;
    border-radius: 20px 0 0 20px;
    opacity: 0.9;
    background-size: cover;
    background-position: 550px;
}

/* 右侧盒子 */
.right_box {
    flex: 1;
    background: @bg-light;
    border-radius: 0 20px 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: @bg-dark;
    background: url(../img/03.png);
    background-size: cover;
    background-position: 650px;
    opacity: 1;
}

/* 表单容器 */
form {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    justify-content: center;
}

/* 表单标题 */
.p_text {
    color: @primary-color; /* 标题使用主色粉红 */
    font-size: 25px;
    margin-bottom: 30px;
    margin-top: 30px;
    font-family: "宋体";
    font-weight: 800;
    cursor: pointer;
    user-select: none;
}

p {
    color: @primary-color; /* 使用粉色作为段落文字颜色 */
    font-size: 35px;
    margin-bottom: 40px;
    font-family: '宋体';
}

/* 输入框 */
.inputBox {
    position: relative;
    margin-bottom: 20px;

    input {
        width: 260px;
        height: 45px;
        background: transparent;
        border: none;
        border-bottom: 1px solid #ff7f7f; /* 使用粉色系边框 */
        outline: none;
        padding-left: 10px;
        font-size: 16px;

        &:focus ~ label,
        &:valid ~ label {
            color: @primary-color;
            font-size: 15px;
            transform: translateY(-35px);
        }
    }

    label {
        color: #432929;
        position: absolute;
        left: 10px;
        top: 0;
        line-height: 45px;
        transition: 0.3s;
    }
}

/* 提交按钮 */
input[type='submit'] {
    width: 200px;
    height: 40px;
    margin-top: 20px;
    background: #ff9a9ad6; /* 使用柔和的粉色 */
    border: none;
    border-radius: 20px;
    border-bottom: 1px solid @accent-color; /* 使用高亮色作为底部边框 */
    outline: none;
    transition: 0.3s;
    cursor: pointer;

    &:hover {
        transform: translateY(-5px);
        background: @btn-hover-color; /* 悬停时的背景色 */
        box-shadow: 2px 6px 8px @box-shadow-color; /* 悬停时的阴影 */
    }
}

/* 延迟跳转盒子样式 */
.left_box {
    .message {
        p {
            color: #ff7f7f; /* 使用粉色字体 */
        }
    }
}

/* 提示文本 */
.right_box form p,
.left_box form p {
    font-size: 16px;
    margin-top: 10px;
    cursor: pointer;

    &:hover {
        text-decoration: underline;
    }
}

/* 错误信息样式 */
.error-message {
    display: flex;
    align-items: center;
    justify-content: center;
    .p_text {
        color: red;
        font-size: 15px;
    }
}
